<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 左侧区域 -->
      <div class="login-left">
        <header class="login-header">
          <img :src="navLogo" alt="Logo" class="header-logo">
          <h1 class="login-title-text">声生知音</h1>
        </header>
        <div class="login-left-content">
          <h1 class="login-title">Welcome Back!</h1>
          <p class="login-description">很高兴再次见到您！我们为您准备专属的AI语音合成服务，让您继续探索声音的无限魅力。让我们一起用声音传递情感，创造精彩！</p>
        </div>
        <div class="login-left-overlay"></div>
        <img :src="login" alt="background" class="login-left-image">
      </div>
      <!-- 右侧区域 -->
      <div class="login-right">
        <h2 class="login-right-title">{{ isPhoneLogin ? '手机号登录' : '账号登录' }}</h2>
        <!-- 登录表单 -->
        <div class="login-form">
          <el-form :model="form" :rules="rules" ref="formRef">
            <template v-if="!isPhoneLogin">
              <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名" size="large">
                  <template #prefix>
                    <el-icon>
                      <User />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="form.password" type="password" placeholder="请输入密码" size="large" show-password>
                  <template #prefix>
                    <el-icon>
                      <Lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </template>
            <!-- 手机号登录 -->
            <template v-else>
              <el-form-item prop="phone">
                <el-input v-model="form.phone" placeholder="请输入手机号" size="large">
                  <template #prefix>
                    <el-icon>
                      <Iphone />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="code">
                <div class="code-input-group">
                  <el-input v-model="form.code" placeholder="请输入验证码" size="large">
                    <template #prefix>
                      <el-icon>
                        <Message />
                      </el-icon>
                    </template>
                  </el-input>
                  <div class="separator"></div>
                  <el-button :disabled="countdown > 0" @click="sendSmsCode" class="verification-btn">
                    {{ countdown > 0 ? `${countdown}s后可重发` : '获取验证码' }}
                  </el-button>
                </div>
              </el-form-item>
            </template>
            <div class="login-action-group">
              <div class="forgot-password-link">
                <!-- 路由跳转重置密码页面 -->
                <router-link to="/forgot-password">忘记密码？</router-link>
              </div>
              <a href="#" class="login-method-switch" @click.prevent="toggleLoginMethod">
                {{ isPhoneLogin ? '用户名密码登录' : '手机号登录' }}
              </a>
            </div>
            <el-button type="primary" @click="handleLogin" class="login-submit-button" size="large">
              登录
            </el-button>
            <div class="register-link">
              没有账号？
              <router-link to="/register"> 点击注册</router-link>
            </div>
          </el-form>
          <!-- 其他登录方式 -->
          <div class="login-social">
            <p class="social-text">其他登录方式</p>
            <div class="social-icons">
              <button class="social-icon">
                <el-icon class="social-icon-inner">
                  <Position />
                </el-icon>
              </button>
              <button class="social-icon">
                <el-icon class="social-icon-inner">
                  <Connection />
                </el-icon>
              </button>
              <button class="social-icon">
                <el-icon class="social-icon-inner">
                  <ChatDotRound />
                </el-icon>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { ChatDotRound, User, Lock, Position, Connection, Iphone, Message } from '@element-plus/icons-vue'
  import { message } from 'ant-design-vue'
  //接口导入
  import { userLogin, userPhoneLogin, sendCode } from '@/api/user'
  import { useUserStore } from '@/stores/userStore'
  import { useRouter } from 'vue-router'
  import navLogo from '@/assets/images/navLogo.webp'
  import login from '@/assets/images/login.webp'
  const router = useRouter()
  const formRef = ref()//整体的表单校验

  // 账号密码登录
  const form = reactive({
    username: '',
    password: '',
    phone: '',
    code: '',
  });
  //手机号登录验证
  const isPhoneLogin = ref(false)
  const countdown = ref(0)
  //表单校验规则
  const rules = reactive({
    username: [
      { required: true, message: '用户名不能为空', trigger: ['blur', 'change'] },
      { min: 2, max: 10, message: '用户名长度需在2-10个字符之间', trigger: ['blur', 'change'] },
      // { pattern: /^[a-zA-Z0-9_-]+$/, message: '用户名只能包含字母、数字、下划线中和划线', trigger: ['blur', 'change'] }
    ],
    password: [
      { required: true, message: '密码不能为空', trigger: ['blur', 'change'] },
      { min: 6, message: '密码长度至少6位', trigger: ['blur', 'change'] },
      { max: 12, message: '密码长度至多12位', trigger: ['blur', 'change'] }
      // { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, message: '密码需包含大小写字母和数字', trigger: ['blur', 'change'] }
    ],
    // 新增手机号验证规则
    phone: [
      {
        required: true,
        pattern: /^1[3-9]\d{9}$/,
        message: '请输入有效的手机号',
        trigger: ['blur', 'change']
      }
    ],
    code: [
      {
        required: true,
        len: 6,
        message: '验证码必须为6位数字',
        trigger: ['blur', 'change']
      }
    ],
  });

  // 发送验证码逻辑
  const sendSmsCode = async () => {
    if (!/^1[3-9]\d{9}$/.test(form.phone)) {
      message.error('请输入有效的手机号', 1);
      return;
    }
    try {
      //用于写发送手机验证码的接口
      const res = await sendCode({
        phone: form.phone
      })
      message.success('验证码已发送', 1);
      // 60秒倒计时
      countdown.value = 60
      const timer = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) clearInterval(timer)
      }, 1000)
    } catch (error) {
      message.error('发送失败，请稍后重试', 1);
    }
  }


  //切换登录方式时，清空表单数据
  const toggleLoginMethod = () => {
    isPhoneLogin.value = !isPhoneLogin.value
    form.username = ''
    form.password = ''
    phone.value = ''
    code.value = ''
    formRef.value?.resetFields()
  }
  //登录注册的post请求
  const handleLogin = async () => {
    try {
      await formRef.value.validate()
      if (!isPhoneLogin.value) {
        const res = await userLogin({
          username: form.username,
          password: form.password
        })

        // 存储token
        const userStore = useUserStore()
        userStore.setToken(res.data)
        message.success(`登录成功！欢迎回来 ${form.username}`, 1);
        // 处理登录成功后的逻辑
        router.push('/main')
      } else {
        //发送手机验证码的接口
        const res = await userPhoneLogin({
          phone: form.phone,
          code: form.code
        })
        const userStore = useUserStore()
        userStore.setToken(res.data)

        // 处理登录成功后的逻辑,获取响应数据
        router.push('/main') // 跳转到仪表盘页面
        // 添加跳转逻辑，利用路由进行页面跳转
      }
    } catch (error) {
      // 使用响应拦截器中的错误处理
      return Promise.reject(error);
    }
  }
</script>

<style scoped lang="scss">
  .login-container {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('@/assets/images/downloadImage.webp') center center / cover no-repeat;
    position: relative;

    .login-box {
      width: 60%;
      height: 45%;
      background: white;
      border-radius: 2rem;
      display: flex;
      overflow: hidden;
      margin: 0 auto;
      position: relative;
      z-index: 2;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      margin: 0 auto;

      .login-left {
        width: 50%;
        padding: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        position: relative;
        overflow: hidden;

        .login-header {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 11;
          display: flex;
          flex-direction: column;
          align-items: center;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 1rem;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

          .login-title-text {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 0.7rem;
            background: linear-gradient(45deg, #2563eb, #60a5fa);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: 0.08em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            text-align: center;
          }
        }

        .header-logo {
          height: 80px;
          width: 160px;
          object-fit: contain;
          margin: 1rem 0 0.5rem 0;
          display: block;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          filter: brightness(1.2) contrast(1.1) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));

          &:hover {
            transform: scale(1.15) translateY(-2px);
            filter: brightness(1.3) contrast(1.15) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
          }
        }

        .login-left-content {
          position: relative;
          z-index: 10;
          margin-top: 2rem;

          .login-title {
            margin: 0 auto;
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 1.5rem;
            letter-spacing: 0.02em;
            background: linear-gradient(135deg, #60a5fa 0%, #4b7adf 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
            line-height: 1.2;
            white-space: nowrap;
            transform: translateZ(0);
            backface-visibility: hidden;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
          }

          .login-description {
            font-size: 1.1rem;
            margin-bottom: 1.25rem;
            color: rgb(85, 75, 75);
            line-height: 2;
            text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
            font-weight: 500;
            letter-spacing: 0.01em;
          }
        }

        .login-left-overlay {
          position: absolute;
          inset: 0;
          /* background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.4), rgba(79, 70, 229, 0.4));
          mix-blend-mode: multiply; */
          z-index: 1;
        }

        .login-left-image {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0.8;
          /* mix-blend-mode: overlay; */
          z-index: 2;
        }

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.1);
          z-index: 1;
        }
      }

      .login-right {
        width: 50%;
        padding: 4rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: white;

        .login-right-title {
          font-size: 1.875rem;
          font-weight: bold;
          margin-bottom: 2.5rem;
          color: #1f2937;
          letter-spacing: -0.025em;
        }

        .login-form {
          width: 100%;
          max-width: 28rem;
          display: flex;
          flex-direction: column;
          gap: 1rem;

          .code-input-group {
            display: flex;
            align-items: center;
            background: #f8fafc;
            border-radius: 12px;
            border: 1.5px solid #e5e7eb;
            transition: all 0.2s ease;
            width: 100%;
            height: 52px;
            overflow: hidden;

            :deep(.el-input__wrapper) {
              border: none !important;
              border-radius: 12px 0 0 12px !important;
            }

            .separator {
              width: 1.5px;
              height: 52px;
              background: #e5e7eb;
              margin: 0;
            }

            &:focus-within {
              border-color: #4096ff;
              box-shadow: 0 0 0 3px rgba(64, 150, 255, 0.1);
            }
          }

          :deep(.el-form-item.is-error) {
            .code-input-group {
              border-color: #dc2626 !important;
              box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.1) !important;

              &:hover {
                border-color: #ef4444 !important;
              }

              &:focus-within {
                border-color: #dc2626 !important;
                box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
              }
            }
          }

          .login-action-group {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 1rem 0;

            .login-method-switch {
              font-size: 0.875rem;
              color: #363a41;
              transition: all 0.3s ease;

              &:hover {
                color: #4096ff;
              }
            }

            .forgot-password-link {
              font-size: 0.875rem;
              color: #363a41;

              &:hover {
                color: #4096ff;
              }
            }
          }

          .login-submit-button {
            width: 100%;
            margin-top: 10px;
            border-radius: 1rem;
            white-space: nowrap;
          }

          .register-link {
            margin-top: 1.5rem;
            text-align: center;
            font-size: 14px;

            a {
              color: #4096ff;
              transition: all 0.3s ease;
              display: inline-block;
              position: relative;
              padding: 2px 4px;
              text-decoration: none;

              &:hover {
                color: #1b7aff;
                transform: translateY(-1px) scale(1.02);
                text-shadow: 0 2px 4px rgba(27, 122, 255, 0.1);
              }

              &::after {
                content: '';
                position: absolute;
                width: 100%;
                height: 1px;
                bottom: 0;
                left: 0;
                background-color: #1b7aff;
                transform: scaleX(0);
                transform-origin: bottom right;
                transition: transform 0.3s ease;
              }

              &:hover::after {
                transform: scaleX(1);
                transform-origin: bottom left;
              }
            }
          }
        }

        .login-social {
          text-align: center;
          margin-top: .625rem;

          .social-text {
            color: #9ca3af;
            margin-bottom: 1rem;
            font-size: 0.875rem;
          }

          .social-icons {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 1rem;

            .social-icon {
              width: 2.5rem;
              height: 2.5rem;
              border-radius: 9999px;
              background: #f9fafb;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: background-color 0.3s ease;

              &:hover {
                background: #e0f2fe;
              }

              .social-icon-inner {
                font-size: 1.25rem;
                color: #9ca3af;
                transition: color 0.3s ease;

                &:hover {
                  color: #3b82f6;
                }
              }
            }
          }
        }
      }
    }
  }

  :deep(.el-input__wrapper) {
    width: 100% !important;
    background-color: rgb(249 250 251) !important;
    border: 1.5px solid #e5e7eb !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    transition: all 0.2s ease !important;

    &.is-focus {
      background-color: white !important;
      border-color: #4096ff !important;
      box-shadow: 0 0 0 3px rgba(64, 150, 255, 0.1) !important;
    }
  }

  :deep(.el-input__prefix-inner)::after,
  :deep(.el-input__prefix-inner)::before {
    content: none !important;
    display: none !important;
  }

  :deep(.el-input__inner) {
    width: 100% !important;
    height: 52px !important;
    font-size: 15px !important;
    color: #1f2937 !important;

    &::placeholder {
      color: #9CA3AF !important;
    }
  }

  :deep(.el-input__prefix) {
    margin-right: 12px !important;
    color: #9CA3AF !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important;

    .el-icon {
      font-size: 18px !important;
    }
  }

  :deep(.el-button--primary) {
    background: linear-gradient(135deg, #4096ff 0%, #1677ff 100%);
    position: relative;
    border: none !important;
    height: 52px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 6px rgba(64, 150, 255, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;

    &:hover {
      transform: translateY(-1px) !important;
      box-shadow: 0 6px 8px rgba(64, 150, 255, 0.3) !important;
    }
  }

  :deep(.el-button--default) {
    border: none !important;
  }

  .el-icon {
    transition: all 0.3s ease;
  }

  :deep(.el-form-item__error) {
    font-size: 0.875rem !important;
    color: #dc2626 !important;
    margin-top: 0.375rem !important;
    padding-left: 0.5rem !important;
    position: absolute !important;
    animation: fadeIn 0.3s ease-in-out !important;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  :deep(.el-form-item) {
    margin-bottom: 1.75rem !important;
    position: relative !important;
  }

  :deep(.el-form-item.is-error .el-input__wrapper) {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.1) !important;
  }

  :deep(.el-form-item.is-error .el-input__wrapper:hover) {
    border-color: #ef4444 !important;
  }

  :deep(.el-form-item.is-error .el-input__wrapper:focus-within) {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
  }
</style>